<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/axios.js"></script>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
        <hr>
        <p>{{zhang.name}}---{{zhang.age}}</p>
        <p>{{zhang.hobby}}</p>
        <p>{{zhang.grade}}</p>
        <p>
            <button @click="changeAge">changeAge</button>
            <button @click="changeChinese">changeChinese</button>
        </p>
        <hr>
        <p>
            <select v-model="pageParams.count">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
            <span>{{pageParams.count}}</span>
        </p>
        <p>
            <select v-model="pageParams.limitNum">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
            <span>{{pageParams.limitNum}}</span>
        </p>

    </div>
</body>
<script type="module">
    // 整体载入  => 查看模块内暴露的变量和方法
    import * as Vue from "../js/vue.esm-browser.js";
    console.log(Vue);

    // 按需引入
    import { createApp, ref, reactive, computed, watch, watchEffect,watchPostEffect } from "../js/vue.esm-browser.js";


    // 组合式写法 可以理解为是选项式语法的优化, 但是最终还是会被解析成选项式语法
    // 在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性
    let app = createApp({
        setup() {

            let count = ref(1);
            const zhang = reactive({
                name: "张三",
                age: 18,
                hobby: ["唱", "跳", "rap"],
                grade: {
                    chinese: 55,
                    math: 66,
                    english: 77,
                },
            })
            let list = ref(null);
            let pageParams = reactive({
                count:1,
                limitNum:5,
            })


            const changeAge = () => {
                zhang.age++;
            }

            const changeChinese = () => {
                zhang.grade.chinese++;
            }

            const addCount = () => {
                count.value++;
            }

            const getList = ()=>{
                axios.get("http://121.43.116.41:5566/admin/pro/list",{
                    params: pageParams,
                })
                .then(responseOption => responseOption.data)
                .then(result=>{
                    list.value = result.data;
                    console.log("请求成功", result);
                })
            }


            // watch(count,function(newVal,oldVal){
            //    console.log("count改变了");
            // })

            // watch([count, () => zhang.name, () => zhang.age], function (newVal, oldVal) {
            //     console.log("newVal", newVal);
            //     console.log("oldVal", oldVal);
            // })


            /* 
                watchEffect
                    立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

                    1.  watchEffect在组件初始化渲染时立即执行一次 (类似添加了 immediate:true的watch)
                    2.  watchEffect对应的回调函数中使用的ref对象,proxy代理对象的数据,默认会成为当前WatchEffect的响应式依赖(订阅了对应的数据), 并在依赖更改时重新执行(依赖的数据改变了之后触发副作用操作 1. 更新视图 2. 所有订阅该依赖的数据和watchEffect都会被通知)


                watch vs. watchEffect​
                    watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

                    watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

                    watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
            
            
            */

            /* watchEffect(function(){
                console.log("count改变了",count.value);
                console.log("zhang.age改变了",zhang.age);
            }) */

            // watchEffect(function(){
            //     getList();
            // },{
            //     flush:"sync", // pre(默认) | post | sync
            // })


             watchPostEffect(function(){
                getList();
            })

            




            return {
                count,
                addCount,

                zhang,
                changeAge,
                changeChinese,

                pageParams
            }
        },
        mounted() {
            console.log("mounted", this);
        },
    })

    app.mount("#app");
</script>

</html>